<template>
    <div class="addForm-view">
        <el-dialog :title="titlemsg"  :visible.sync="dialogFormVisible" width="10%" :show-close="showimg" :close-on-click-modal="showimg" :close-on-press-escape="showimg" >
            <div v-show="comeRrom==3">
                <div class="dialog-close-img" @click="closeFormusersee">
                    <img src="../../../assets/img/cancel@2x.png"/>
                </div>
                <div class="Codeimg">
                    <img :src="seeDetails?seeDetails.qrCode:''">
                </div>
                <div class="Codeimg-download" @click="downLoad(seeDetails.qrCode)">下载</div>
            </div>
            <div v-show="comeRrom==1">
                <div class="addForm-see-msg-title">详细信息</div>
                <div>
                    <div class="addForm-see-msg-list">
                        <div class="addForm-see-msg-list-title">所属组织：</div>
                        <div>{{usermsgaInfo.structName}}</div>
                    </div>
                    <div class="addForm-see-msg-list">
                        <div class="addForm-see-msg-list-title">用户账号：</div>
                        <div>{{usermsgaInfo.account}}</div>
                    </div>
                    <div class="addForm-see-msg-list">
                        <div class="addForm-see-msg-list-title">用户姓名：</div>
                        <div>{{usermsgaInfo.name}}</div>
                    </div>
                    <!--<div class="addForm-see-msg-list">-->
                        <!--<div class="addForm-see-msg-list-title">密码：</div>-->
                        <!--<div>{{usermsgaInfo.password}}</div>-->
                    <!--</div>-->
                </div>
                <div class="addForm-see-msg-title">权限设置</div>
                <div>
                    <div class="addForm-see-msg-list">
                        <div class="addForm-see-msg-list-title">角色权限：</div>
                        <div>{{usermsgaInfo.roleName}}</div>
                    </div>
                    <div class="addForm-see-msg-list">
                        <div class="addForm-see-msg-list-title">查看范围：</div>
                        <div class="addForm-see-msg-list-text">暂无数据</div>
                    </div>
                </div>
                <div slot="footer" class="dialog-footer">
                    <!--<el-button class="cancel-button" @click="gotoEditor">编 辑</el-button>-->
                    <el-button class="sure-button" type="primary" @click="closeFormusersee">关 闭</el-button>
                </div>
            </div>
            <div v-show="comeRrom==2||comeRrom==0" >
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
                <div class="addForm-see-msg-title">详细信息</div>
                    <div v-if="this.seeDetails">
                        <el-form-item prop="account">
                            <div class="addForm-form-input">
                                <div class="addForm-form-input-title"><span>*</span>用户账号：</div>
                                <div>
                                    <el-input
                                            class="addForm-form-input-input"
                                            placeholder="请输入用户账号"
                                            v-model="ruleForm.account"
                                            :disabled="true"
                                            clearable>
                                    </el-input>
                                </div>
                            </div>
                        </el-form-item>
                    </div>
                    <div v-else>
                        <el-form-item prop="account">
                            <div class="addForm-form-input">
                                <div class="addForm-form-input-title"><span>*</span>用户账号：</div>
                                <div>
                                    <el-input
                                            class="addForm-form-input-input"
                                            placeholder="请输入用户账号"
                                            v-model="ruleForm.account"
                                            clearable>
                                    </el-input>
                                </div>
                            </div>
                        </el-form-item>
                    </div>
                    <el-form-item prop="name">
                        <div class="addForm-form-input">
                            <div class="addForm-form-input-title"><span>*</span>用户姓名：</div>
                            <div>
                                <el-input
                                        class="addForm-form-input-input"
                                        placeholder="请输入用户姓名"
                                        v-model="ruleForm.name"
                                        clearable>
                                </el-input>
                            </div>
                        </div>
                    </el-form-item>
                    <div v-if="this.seeDetails">
                    </div>
                    <div v-else>
                        <el-form-item prop="password">
                            <div class="addForm-form-input">
                                <div class="addForm-form-input-title"><span>*</span>用户密码：</div>
                                <div>
                                    <el-input
                                            class="addForm-form-input-input"
                                            placeholder="请输入用户密码"
                                            v-model="ruleForm.password"
                                            clearable>
                                    </el-input>
                                </div>
                            </div>
                        </el-form-item>
                    </div>
                    <div v-if="this.seeDetails">
                        <el-form-item prop="distributorId">
                            <div class="addForm-form-input">
                                <div class="addForm-form-input-title"><span>*</span>所属组织：</div>
                                <div>
                                    <el-cascader
                                            class="addForm-form-input-input"
                                            placeholder="请选择所属组织"
                                            :options="treeList"
                                            filterable
                                            change-on-select
                                            :show-all-levels="false"
                                            :props="defaultProps"
                                            v-model="ruleForm.distributorId"
                                            :disabled="true"
                                    ></el-cascader>
                                </div>
                            </div>
                        </el-form-item>

                    </div>
                    <div v-else>
                        <el-form-item prop="distributorId">
                            <div class="addForm-form-input">
                                <div class="addForm-form-input-title"><span>*</span>所属组织：</div>
                                <div>
                                    <el-cascader
                                            class="addForm-form-input-input"
                                            placeholder="请选择所属组织"
                                            :options="treeList"
                                            filterable
                                            change-on-select
                                            :show-all-levels="false"
                                            :props="defaultProps"
                                            v-model="ruleForm.distributorId"
                                    ></el-cascader>
                                </div>
                            </div>
                        </el-form-item>
                    </div>

                    <el-form-item prop="degree">
                        <div class="addForm-form-input">
                            <div class="addForm-form-input-title">职位：</div>
                            <div>
                                <el-input
                                        class="addForm-form-input-input"
                                        placeholder="请输入职位"
                                        v-model="ruleForm.degree"
                                        clearable>
                                </el-input>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item prop="phone">
                        <div class="addForm-form-input">
                            <div class="addForm-form-input-title"><span>*</span>手机号：</div>
                            <div>
                                <el-input
                                        class="addForm-form-input-input"
                                        placeholder="请输入手机号"
                                        v-model="ruleForm.phone"
                                        clearable>
                                </el-input>
                            </div>
                        </div>
                    </el-form-item>
                <div class="addForm-see-msg-title">权限设置：</div>
                    <el-form-item prop="rolemsg">
                        <div class="addForm-form-input">
                            <div class="addForm-form-input-title"><span>*</span>角色权限：</div>
                            <div>
                                <el-select v-model="ruleForm.rolemsg" value-key="id" :placeholder="ruleForm.rolemsg.name?ruleForm.rolemsg.name:'请选择'">
                                    <el-option
                                            v-for="item in jurisdiction"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                    </el-form-item>

                </el-form>
                <div class="addForm-form-input">
                    <div class="addForm-form-input-title">查看范围：</div>
                    <div>
                        <el-button type="primary" plain @click="innerVisible = true">添加楼盘</el-button>
                    </div>
                </div>
                <div class="addForm-form-houselist"><el-checkbox class="addForm-form-houselist-checkbox" v-model="ruleForm.hasAll">查看组织下所有楼盘</el-checkbox></div>
                <div class="addForm-form-houselist">
                    <div v-for="item in (ruleForm.listlinkername)" :key="index">{{item}}</div>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button class="cancel-button" @click="closeFormuser('ruleForm')">取 消</el-button>
                    <el-button class="sure-button" type="primary" @click="addstruct('ruleForm')">保 存</el-button>
                </div>
            </div>

        </el-dialog>
        <el-dialog
                width="30%"
                title="查看范围设置"
                :visible.sync="innerVisible">
            <div>
                <div class="cotent-botton">
                    <div class="cotent-botton-input">
                        <el-input
                                placeholder="楼盘名称"
                                v-model="valuename"
                                clearable>
                        </el-input>
                    </div>
                    <div class="cotent-botton-input">
                        <el-select v-model="values" clearable placeholder="请选择省份">
                            <el-option
                                    v-for="item in citylist"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="cotent-botton-input">
                        <el-select v-model="valuec"   placeholder="请选择城市">
                            <el-option
                                    v-for="item in citylist1"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="cotent-botton-input">
                        <el-select v-model="valueq"  placeholder="请选择城区">
                            <el-option
                                    v-for="item in citylist2"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="cotent-botton-botton-one"  @click="queryInfo">查 询</div>
                    <div class="cotent-botton-botton-two" @click="emptyingInfo">清 空</div>
                </div>
            </div>
            <div class="cotent-botton">
                <div class="cotent-botton-botton-two" @click="batchAdd" >批量添加</div>
                <div class="cotent-botton-botton-two" @click="batchDel" >批量删除</div>
            </div>
            <UserListNew :headlist="headlist" :contentlist="list"  @selectList="selectList"></UserListNew>
            <Pagination :totalpag="totalpag" v-on:currentpage="currentpage"></Pagination>
            <div slot="footer" class="dialog-footer">
                <el-button class="cancel-button" @click="innerVisible = false">取 消</el-button>
                <el-button class="sure-button" type="primary" @click="innerVisible = false">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import UserListNew from '../user/UserListNew';
    import Pagination from '../Pagination';
    import {numberLetter,telePhone,password} from "../../../utils/regular";
    //数组里面每个对象的ID和parenId都组成另外一个对象存起来
    function tree2Normal(newArray, sourceArray) {
        sourceArray.forEach(item => {
            newArray.push({
                id: item.id,
                parentId: item.parentId
            });
            if (item.children.length > 0) {
                tree2Normal(newArray, item.children);
            }
        });
    }

    function findFathers(newArray, sourceArray, id) {
        let parentId = sourceArray.find(item => item.id == id)
            ? sourceArray.find(item => item.id == id).parentId
            : 0;
        if (parentId != 0) {
            newArray.unshift(parentId);
            findFathers(newArray, sourceArray, parentId);
        }
    }

    export default {
        name: "addUser",
        data(){
            //表单验证
            var validateAccount = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入账号'));
                } else if (!numberLetter(value)) {
                    callback(new Error('账号只能为数字和字母组成'));
                }else if (50<value.length) {
                    callback(new Error('账号不大于50个字符'));
                } else {
                    callback();
                }
            };

            var validatePhone= (rule, value, callback) => {
                    if (!telePhone(value)) {
                        callback(new Error('请输入正确的11位手机号码'))
                    }else {
                        callback();
                    }
            }
            var validateRolemsg= (rule, value, callback) => {
                if (!value.id) {
                    callback(new Error('请选择权限'))
                }else {
                    callback();
                }
            }
            var validatePassword= (rule, value, callback) => {
                if(value === ''){
                    callback(new Error('请输入用密码'));
                }else if(value.length<6||value.length>18){
                    callback(new Error('密码长度在 6到 18 个字符'));
                }else if (!password(value)) {
                    callback(new Error('密码由数字和字母和特殊符合组成'));
                }else {
                    callback();
                }
            }
            return{
                // listlinkername:[],
                usermsgaInfo:{},
                jurisdiction:[],
                organizationId: this.$store.getters.userData.userMsg.id,//组织id
                innerVisible: false,
                current:1,
                showimg:false,
                titlemsg:"新增用户",
                resource:0,
                treeList:[],
                ruleForm:{
                    dividedHouseIds:"",
                    password:"",
                    account:"",
                    name:"",
                    distributorId:[],
                    degree:"",
                    phone:"",
                    rolemsg:{},
                    hasAll:false,
                    listlinkername:[],
                    roleName:"",
                },
                rules:{
                    account: [
                        { validator: validateAccount, trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                    ],
                    password:[
                        { validator: validatePassword, trigger: 'blur' }
                    ],
                    distributorId: [
                        {type: 'array', required: true, message: '请选择组织',trigger: 'change' },
                    ],
                    rolemsg:[
                        { type: 'object',required: true,validator: validateRolemsg,  trigger: 'change'},
                    ],
                    phone:[
                        {  required: false,validator: validatePhone, trigger: 'blur' }
                    ],
                },
                input1:"",
                input2:"",
                input3:"",
                input4:"",
                input5:"",
                valuename:"",
                values:"",
                valuec:"",
                valueq:"",
                citylist: [],
                citylist1:[],
                citylist2:[],
                inputvalue:[],
                headlist:{
                    checkout:true,
                    operation:{
                        type:false,
                        fromurl:"",
                    },
                    list:[
                        {
                            prop:"id",
                            label:"序号",
                            width:"80",
                        },{
                            prop:"houseName",
                            label:"楼盘名称",
                            width:"250",
                        }
                        ,{
                            prop:"address",
                            label:"区域",
                            width:"242",
                        }
                    ]},
                list:[],
                totalpag:0,
                treeList:[],
                defaultProps: {
                    children: 'children',
                    label: 'name',
                    value:'id',
                },
            }
        },
        components: {
            UserListNew,
            Pagination,
        },
        props:{
            seeDetails:{
                type:Object,
            },
            dialogFormVisible: {
                type: Boolean
            },
            comeRrom: {
                type: Number
            },
        },
        watch: {
            comeRrom:{
                handler(newValue, oldValue) {
                    console.log(newValue)
                    if(newValue==3){
                        this.titlemsg="拓展二维码"
                    }else if(newValue==1){
                        this.titlemsg="查看用户信息"
                    }else if(newValue==2){
                        this.titlemsg="编辑用户"
                    }else {
                        this.titlemsg="新增用户"
                    }
                }
            },
            seeDetails:{
                handler(newValue, oldValue) {
                    console.log(newValue);
                    let _this = this;
                    this.getusermsg();
                    let params={
                        structId:this.organizationId,
                    }
                    console.log("详情详情",newValue)
                    this.ruleForm.rolemsg={
                        id:newValue.roleid,
                        name:newValue.roleName
                    };
                    _this.Api.setting.queryStructTree(params).then(data => {
                        this.treeList = data.data;
                        if (newValue) {
                            for (let props in newValue) {
                                this.ruleForm[props] = newValue[props];
                            }
                            var id = newValue.id;
                            let newArray = [];
                            tree2Normal(newArray, data.data);
                            let newArray2 = [];
                            findFathers(newArray2, newArray, id);
                            if (newArray2.length == 0) {
                                newArray2[0] = this.ruleForm.distributorId;
                            }
                            this.ruleForm.distributorId = newArray2;
                            console.log(this.comingData)
                        }

                    });
                },
                deep: true

            },
            values(){
                console.log(this.values,"}}}}}}}}}}")
                this.values=""
                if(this.values){
                    let _this = this;
                    let params={
                        pid:this.values,
                    }
                    _this.Api.setting.cityList(params).then((data)=>{
                        console.log("kkkkkkkkkkkkkkkkkkk",data)
                        _this.citylist1=data.data;
                    })
                }

            },
            valuec(){
                console.log(this.valuec,"}}}}}}}}}}")
                this.valuec=""
                if(this.valuec){
                    let _this = this;
                    let params={
                        pid:this.valuec,
                    }
                    _this.Api.setting.cityList(params).then((data)=>{
                        console.log("kkkkkkkkkkkkkkkkkkk",data)
                        _this.citylist2=data.data;
                    })
                }

            },
        },
        mounted(){

            this.getlist()
            this.getcity()
            let _this = this;
            let params={
                structId:this.organizationId,
            }
            _this.Api.setting.queryStructTree(params).then((data)=>{
                this.treeList=data.data
            })
        },
        methods: {
            //批量添加
            batchAdd(){
                this.$refs.table
            },
             //批量删除
            batchDel(){
                 this.$refs.table
            },
            //下载按钮
            downLoad(str){
                window.open(str)
                this.$emit("close");
                this.$message({
                    message: '下载成功！',
                    type: 'success'
                });
            },
            //选择
            selectList(val){
                this.ruleForm.dividedHouseIds=val.list
                this.ruleForm.listlinkername=val.nameLsit
                console.log("aaaaaaa",val)
            },
            getusermsg(){
                let _this = this;
                let params={
                    id:this.seeDetails.id,
                    distributorId:this.seeDetails.distributorId
                }
                _this.Api.setting.querySingleUser(params).then((data)=>{
                    console.log("kkkkkkkkkkkkkkkkkkk",data)
                    _this.usermsgaInfo=data.data;
                })
            },
            currentpage(currentpage){
                console.log("当前页，",currentpage)
                this.current=currentpage
                this.getlist()
            },
            getcity(){
                let _this = this;
                let params={
                    pid:0,
                }
                _this.Api.setting.cityList(params).then((data)=>{
                    console.log("kkkkkkkkkkkkkkkkkkk",data)
                    _this.citylist=data.data;
                })
            },
            //查询
            queryInfo(){
                if (this.valuename==""&&this.values==""&&this.valuec==""&&this.valueq=="") {
                    this.$message({
                        message: '没有输入或选择查询内容',
                        type: 'warning'
                    });
                }else {
                    this.getlist()
                }
            },
            //清空
            emptyingInfo(){
                this.valuename="";
                this.values="";
                this.valuec="";
                this.valueq="";
                this.getlist();
            },
            getlist(){
                let _this = this;
                let params={
                    current:_this.current,
                    size:10,
                    distributorId:_this.organizationId,
                    houseName: this.valuename,
                    province: this.values,
                    city: this.valuec,
                    area: this.valueq,
                }
                _this.Api.setting.queryHouses(params).then((data)=>{
                    _this.totalpag=data.data.total
                    _this.list=data.data.records?data.data.records:[];
                })
                let params1={
                    distributorId:_this.organizationId,
                }
                _this.Api.setting.roleList(params1).then((data)=>{
                    _this.jurisdiction=data.data.records;
                })
            },
            gotoEditor(){
                this.$emit("close");
            },
            closeFormusersee(){
                this.$emit("close");
            },
            closeFormuser(formName){
                this.$emit("close");
                this.$refs[formName].resetFields();
            },
            addstruct(formName){
                let _this = this;
                if(this.ruleForm.hasAll==true){
                    var hasAll=1
                }else {
                    var hasAll=0
                }
                if(this.seeDetails){
                    var params= {
                        id:this.seeDetails.id,
                        name:this.ruleForm.name,
                        degree:this.ruleForm.degree,
                        phone:this.ruleForm.phone,
                        roleid:this.ruleForm.rolemsg.id,
                        hasAll:hasAll,
                        dividedHouseIds:this.ruleForm.dividedHouseIds,
                    };
                }else {
                    var params= {
                        dividedHouseIds:this.ruleForm.dividedHouseIds,
                        password:this.ruleForm.password,
                        account:this.ruleForm.account,
                        name:this.ruleForm.name,
                        distributorId:this.ruleForm.distributorId[this.ruleForm.distributorId.length-1],
                        degree:this.ruleForm.degree,
                        phone:this.ruleForm.phone,
                        roleid:this.ruleForm.rolemsg.id,
                        hasAll:hasAll
                    };
                }


                this.$refs[formName].validate((valid) => {

                    if (valid) {
                        if(this.seeDetails){
                            _this.Api.setting.updateuser(params).then((data)=>{
                                if(data.returnCode==10000){
                                    this.$emit("refreshList");
                                    this.$emit("close");
                                    this.$message({
                                        message: "修改用户成功",
                                        type: 'success'
                                    });
                                }else {
                                    this.$message({
                                        message: data.msg,
                                        type: 'warning',
                                    });
                                }

                                console.log("成功",data)


                            })
                        }else {
                            _this.Api.setting.addUser(params).then((data)=>{
                                if(data.returnCode==10000){
                                    this.$emit("close");
                                    this.$emit("refreshList");
                                    this.$message({
                                        message: "新增用户成功",
                                        type: 'success'
                                    });
                                }else {
                                    this.$message({
                                        message: data.msg,
                                        type: 'warning',
                                    });
                                }
                                console.log("成功",data)

                            })
                        }

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });



            }
        }
    }
</script>
<style>
    .addForm-view .el-dialog--small {
        width:672px;
    }
    .addForm-view .el-form-item__label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.85);
        line-height:22px;
        padding: 7px 0px 0px 30px;
        box-sizing: border-box;
    }
    .addForm-view  .el-dialog__header{
        height: 50px;
        padding: 10px ;
        text-align: left;
        font-size:16px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(0,0,0,0.85);
        line-height:24px;

    }
    .addForm-view .el-dialog__body{
        padding: 0px 24px 0px 24px;
        border-top: 1px #E9E9E9 solid;
        border-bottom: 1px #E9E9E9 solid;
    }
</style>
<style scoped rel="stylesheet/scss" lang="scss">
    .dialog-close-img{
        width: 18px;
        height: 18px;
        position: absolute;
        top: 16px;
        right: 12px;
        cursor: pointer;
        img{
            width: 18px;
            height: 18px;
        }
    }
    .addForm-form-resource{
        display: flex;
        margin-bottom: 12px;
        justify-content: center;
    }

    .addForm-form-resource-radio{
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.65);
        line-height:22px;
        align-self: center;
        margin-right: 5px;
    }
    .addForm-form-input{
        display: flex;
        margin-top: 24px;
    }
    .addForm-form-input-title{
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.85);
        line-height:22px;
        align-self: center;
        min-width: 70px;
        text-align: right;
        span{
            color: #FF0606;
            margin-bottom: -3px;
        }
    }
    .addForm-form-input-input{
        width:375px;
        height:32px;
        background:rgba(255,255,255,1);
        border-radius:4px;
    }
    .cancel-button{
        padding: 0px;
        width:78px;
        height:32px;
        line-height:32px;
        border-radius:4px;
        border:1px #D9D9D9 solid;
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.25);
        text-align: center;
    }
    .sure-button{
        padding: 0px;
        width:78px;
        height:32px;
        line-height:32px;
        border-radius:4px;
        background:rgba(24,144,255,1);
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(255,255,255,1);
        text-align: center;
    }
    .Codeimg{
        width:251px;
        height:251px;
        margin: 0 auto;
        margin-top: 24px;
        img{
            width:251px;
            height:251px;
        }
    }
     .Codeimg-download{
         width:78px;
         height:32px;
         line-height: 32px;
         background:rgba(24,144,255,1);
         border-radius:4px;
         margin: 0 auto;
         font-size:14px;
         font-family:PingFangSC-Regular;
         font-weight:400;
         color:rgba(255,255,255,1);
         text-align: center;
         margin-top: 24px;
         margin-bottom: 24px;
     }
    .addForm-see-msg-title{
        font-size:16px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(0,0,0,0.85);
        margin-top: 24px;
    }
    .addForm-see-msg-list{
        display: flex;
        margin-top: 16px;
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.65);
        .addForm-see-msg-list-title{
            color:rgba(0,0,0,0.85);
            min-width: 75px;
        }
        .addForm-see-msg-list-text{
          margin-right: 16px;
        }
    }
    .dialog-footer{
        width: 100%;
        border-top: 1px #E9E9E9 solid;
        text-align: right;
        padding: 16px 0px;
        margin-top: 24px;
    }
    .cotent-botton{
        display: flex;
        margin-bottom: 24px;
        .cotent-botton-input{
            width:150px;
            height:32px;
            margin-right: 16px;

        }
        .cotent-botton-botton-one{
            width:65px;
            height:32px;
            line-height: 32px;
            text-align: center;
            background:rgba(24,144,255,1);
            border-radius:4px;
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,255,255,1);
            margin-right: 16px;
        }
        .cotent-botton-botton-two{
            width:65px;
            height:32px;
            line-height: 32px;
            background:rgba(255,255,255,1);
            border-radius:4px;
            border:1px #D9D9D9 solid;
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(0,0,0,0.65);
            text-align: center;
            margin-right: 16px;
        }
        .cotent-botton-botton-two2{
            width:88px;
            height:32px;
            line-height: 32px;
            background:rgba(255,255,255,1);
            border-radius:4px;
            border:1px #D9D9D9 solid;
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(0,0,0,0.65);
            text-align: center;
            margin-right: 16px;
        }
    }
    .cancel-button{
        padding: 0px;
        width:78px;
        height:32px;
        line-height:32px;
        border-radius:4px;
        border:1px #D9D9D9 solid;
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.25);
        text-align: center;
    }
    .sure-button{
        padding: 0px;
        width:78px;
        height:32px;
        line-height:32px;
        border-radius:4px;
        background:rgba(24,144,255,1);
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(255,255,255,1);
        text-align: center;
    }
    .addForm-form-houselist{
        display: flex;
        flex-wrap:wrap;
        margin-left: 70px;
        div{
            margin-right: 24px;
            margin-top: 16px;
        }
    }
    .addForm-form-houselist-checkbox{
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.65);
        margin-top: 16px;
    }
</style>